<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="项目名称">
        <el-input v-model="formInline.name" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item label="项目编号">
        <el-input v-model="formInline.numbering" placeholder="项目编号" @click="handleRightClick()"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" size="mini" @click="onSubmit">查询</el-button>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="roleList">
      <el-table-column label="费用类型" prop="val1">
        <template slot-scope="scope">
          <el-input
            style="width: 100%"
            v-model="scope.row.val1"
            placeholder="请输入内容"
            @change="val1Change(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="列支项目" prop="val2">
        <template slot-scope="scope">
          <el-input
            style="width: 100%"
            v-model="scope.row.val2"
            placeholder="请输入内容"
            @change="val2Change(scope.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="" prop="val3" align="center">
        <template slot="header">
          公司科目
          <el-tooltip class="item" effect="dark" content="数据列可点击选择" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <!-- <el-input style="width: 100%" v-model="scope.row.val3" placeholder="请输入内容"></el-input> -->
          <div style="width: 100%" @click="val3Click(scope.row, true)">
            {{ scope.row.val3 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="项目科目" prop="val4">
        <template slot="header">
          项目科目
          <el-tooltip class="item" effect="dark" content="数据列可点击选择" placement="bottom">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <!-- <el-input style="width: 100%" v-model="scope.row.val4" placeholder="请输入内容" :disabled="true"></el-input> -->
          <div style="width: 100%" @click="val3Click(scope.row, false)">
            {{ scope.row.val4 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="DelClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Dialogs v-on:transfer="getUser" :dialogVisible.sync="dialogVisible" :upoldid="upoldid" :Nid="Nid"></Dialogs>
  </div>
</template>

<script>
import Dialogs from './components/Dialog.vue'
export default {
  name: 'AccountMatching',
  components: {
    Dialogs
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表格数据
      roleList: [
        { oldid: '1', val1: '一、经营费用', val2: '业务招待', val3: 'A001', val4: 'B001' },
        { oldid: '2', val1: '', val2: '差旅费', val3: 'A001', val4: 'B001' },
        { oldid: '3', val1: '', val2: '车辆费', val3: 'A001', val4: 'B001' },
        { oldid: '4', val1: '二、其他费用', val2: '包装费', val3: 'A001', val4: 'B001' },
        { oldid: '5', val1: '', val2: '快递费', val3: 'A001', val4: 'B001' },
        { oldid: '6', val1: '', val2: '业务招待', val3: 'A001', val4: 'B001' }
      ],
      // 查询数据
      formInline: {
        name: '',
        numbering: ''
      },
      // id值
      oldid: '',
      // 用来区分公司与项目
      Nid: '',
      // 弹出id值
      upoldid: '',
      dialogVisible: false
      // rules: {
      //   val4: [{ required: true, type: 'number', message: '年龄必须为数字值' }]
      // }
    }
  },
  created() {
    this.loading = false
  },
  methods: {
    getUser(msg) {
      console.log(this.upoldid)
      console.log(msg)
      this.roleList.forEach((item, index) => {
        if (item.oldid == this.upoldid.oldid) {
          var data = ''
          var data1 = ''
          msg.forEach((items, index) => {
            if (items.startsWith('A')) {
              if (index == 0) {
                data += items
              } else {
                data += ',' + items
              }
            } else {
              if (index == 0) {
                data1 += items
              } else {
                data1 += ',' + items
              }
            }
          })
          if (this.Nid) {
            var bole = data.startsWith(',')
            if (bole == true) {
              item.val3 = data.substr(1)
            } else {
              item.val3 = data
            }
          } else {
            var bole = data1.startsWith(',')
            if (bole == true) {
              item.val4 = data1.substr(1)
            } else {
              item.val4 = data1
            }
          }
        }
      })
    },
    // 新增按钮操作
    handleAdd(row) {
      this.$message.success('添加')
      console.log(row)
      this.oldid = 'id-' + new Date().getTime().toString(36) + '-' + Math.random().toString(36).substr(2, 9)
      this.roleList.push({
        oldid: this.oldid,
        val1: '',
        val2: '',
        val3: ''
      })
    },
    // 点击删除
    DelClick(row) {
      console.log(row.oldid)
      this.roleList = this.roleList.filter(item => item.oldid != row.oldid)
    },
    val3Click(row, Nid) {
      console.log(row)
      // this.upoldid = row.oldid
      this.upoldid = row

      this.dialogVisible = true
      this.Nid = Nid
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 点击查询
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style scoped>
.el-table {
  overflow-y: auto;
  /* border: 1px solid red; */
  height: calc(100vh - 200px);
}
.el-icon-question {
  color: rgb(230, 162, 60);
  /* background-color: rgb(230, 162, 60); */
}
</style>
